<template>
    <ak-header data-display="false">
    </ak-header>
    <div class="plug_slider w_100 h_fill ovh rel animated fadeIn">
        <ul>
            <li>
                <section class="wh_100 rel ovh bg_taobao">
                    <i class="icon-im_andrew text_6em w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                    <h1 class="c_white text_al_c line_h_8em" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是1号屏幕，第一屏,请右侧滑动切换界面</h1>
                </section>
            </li>
            <li>
                <section class="wh_100 rel ovh bg_alipay">
                    <i class="icon-im_andrew text_6em w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInRight', duration:1, delay:0}"></i>
                    <h1 class="c_white text_al_c line_h_8em" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是2号屏幕，左右滑动切换界面</h1>
                </section>
            </li>
            <li>
                <section class="wh_100 rel ovh bg_wechat">
                    <i class="icon-im_andrew text_6em w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                    <h1 class="c_white text_al_c line_h_8em" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是3号屏幕，左右滑动切换界面</h1>
                </section>
            </li>
            <li>
                <section class="wh_100 rel ovh bg_orange-yellow">
                    <i class="icon-im_andrew text_6em w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                    <h1 class="c_white text_al_c line_h_8em" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是4号屏幕，到头了，请左侧滑动切换界面</h1>
                    <fieldset class="abs bottom_30 w_100">
                        <button type="button" class="rel w_30 center h_24em bg_white bor_rad_03em c_title text_14em" data-animation="{name:'tinDownIn', duration:1, delay:1}" data-href="/page1">点击进入</button>
                    </fieldset>
                </section>
            </li>
        </ul>
    </div>
    <ak-footer data-display="false">
    </ak-footer>
</template>

<script type="text/javascript">
    //引入Andrew插件的区域
    /*-----------------------------------------------Andrew_Slider 使用方法-------------------------------------------*/

    $(function() {
        $(".plug_slider").Andrew_Slider({
            fullpage: true, //是否满屏模式滑动（true，false）
            start: 1, //默认显示的图片排号
            speed: 500, //图片切换的速度
            interval: 5000, //图片切换间隔毫秒
            autoPlay: false, //幻灯片是否自动播放（true，false）
            loopPlay:false, //幻灯片是否循环播放（true，false）
            dotShow: true, //是否显示幻灯片位置按钮（true，false）
            arrShow: false, //是否显示左右切换按钮（true，false）
            dotClass: "fl wh_08em bg_black04 mb_2em mr_05em bor_rad_50 pointer", //底部图片位置的样式设置
            ActiveClass: "bg_white", //底部图片位置的当前样式
            afterSlider: function(num) { //回调获取当前的数
                //console.log(num);
            }
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header></ak-header>
    <div></div>
    <ak-footer></ak-footer>
</template>
<script>
</script>
<style>
</style>
-->